<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物业管理</title>
    <!-- 引入Bootstrap CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 引入自己的css文件 -->
    <link href="css/style.css" rel="stylesheet">
    <link href="mainpageCss/mycss.css" rel="stylesheet">
</head>
<body  data-spy="scroll" data-target="#topnav">
<div class="navbar navbar-default navbar-fixed-top" id="topnav">
    <div class="container d-flex">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="images/logo.png" alt="Expose" class="img-logo" /> </a>
        </div>
        <div class="navbar-collapse collapse d-flex"  style="float: right" >
            <ul class="nav navbar-nav">
                <li><a href="#home">首页</a></li>
                <li><a href="#features">物业资讯</a></li>
                <li><a href="#">建党活动</a></li>
                <li><a href="#services">报事报修</a> </li>
                <li><a href="#contact">联系我们</a></li>
                <li><a href="login.jsp">办事大厅</a></li>

                <li><a href="#">客户端</a></li>
            </ul>

        </div>
        <!--/.navbar-collapse -->
    </div>
</div>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" id="home">
    <div class="container">
        <div class="media">
            <div class="pull-right"><img class="media-object" src="images/logo.png" alt="" style="width: 600px"/>
                <p style="color:#f1fbfb;font-size: 50px;font-family:幼圆;font-weight: bolder; margin-top: -60px">&nbsp;&nbsp;你保护世界，我保护你！</p></div>

            <div class="media-body">
                <br><br>
                <p style="font-size: 85px;font-family: 楷体;">智慧物业系统</p>
                <p style="font-family: 楷体">&nbsp;&nbsp;业主即用户，零推广高粘性的用户资源，让商业变现更轻。用户通过网页门户下登录办事大厅、报事报修、结算业务、物业资讯等模块能够在网页门户进行对应业务处理。</p>
                <p><a class="btn btn-success btn-lg">更多 <i class="icon icon-angle-right"></i></a></p>
            </div>
        </div>
    </div>
</div>

<section class="slider" id="features">
    <div class="container">
        <div class="inner-page">
            <h1 class="page-headline text-center">物业资讯</h1>
        </div>
        <div class="row inner-page">
            <div class="col-md-8 col-md-push-4 lazy-container loaded">
                <!--<img data-original="images/mockup.png" src="images/mockup.png" alt="Looks great on every device"-->
                <!--class="lazy">-->

                <div class="row">
                    <div class="col-md-6">
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="icon-group"></i>
                            </div>
                            <a href="#" class="feature-box-info">
                                <h4 class="shorter">智能社区的建设是必不可少的</h4>

                                <p class="tall">很多开发商已经意识到这一点。他们在房地产开发之中采用了智能小区的整体 解决方案，
                                    给新建筑社区带来了明显的优势和独特性[…]</p>
                            </a>
                        </div>
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="icon-file"></i>
                            </div>
                            <a href="#" class="feature-box-info">
                                <h4 class="shorter">智能社区的基本概念和实践方面是什么？</h4>

                                <p class="tall">智慧城市包括智慧科技、智慧产业、智慧（应用）工程、智慧服务、智慧
                                    治理、智慧人文、智慧生活等，具体而言，智慧（应用）[…]</p>
                            </a>
                        </div>
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="icon-google-plus"></i>
                            </div>
                            <a href="#" class="feature-box-info">
                                <h4 class="shorter">智能园区的人脸识别门禁系统</h4>

                                <p class="tall">智慧园区是指充分利用物联网、互联网等网络通信技术，将物业管理、安
                                    防、通信、民生等系统集成起来，提供一个安全的， […] </p>
                            </a>
                        </div>
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="icon-adjust"></i>
                            </div>
                            <a href="#" class="feature-box-info">
                                <h4 class="shorter">智慧社区的基本介绍</h4>

                                <p class="tall">“智慧社区”的建设，就是要把“智慧城市”的概念引入社区。以社区幸福为
                                    出发点，通过打造智慧社区，为社区群众提供便 […]</p>
                            </a>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-md-4 col-md-pull-8">
                <div class="list-group">
                    <img src="images/features.png" alt="#">
                </div>


            </div>
        </div>
    </div>
</section>

<div class="container" id="services">
    <!-- Example row of columns -->
    <div class="row features">
        <a href="#repair">
            <div class="col-lg-4 text-center">
                <div class="single-fet">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 0 0-5.86 2.929 2.929 0 0 0 0 5.858z"/>
                        </svg>
                    </div>
                    <h2>高压故障</h2>

                    <p>高压故障是指电力系统中高压电气设备（电压等级在1千伏及以上者）的故障，
                        主要包括高压计量设备、高压线路、高压变电设备故障等。 </p>
                </div>
            </div>
        </a>
        <a href="#repair">
            <div class="col-lg-4 text-center">
                <div class="single-fet">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"/>
                            <path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"/>
                        </svg>
                    </div>
                    <h2>低压故障</h2>

                    <p>低压故障是指电力系统中低压电气设备（电压等级在1千伏以下者）的故障，
                        主要包括低压线路、进户装置、低压公共设备、低压计量设备故障等。 </p>

                </div>
            </div>
        </a>
        <a href="#repair">
            <div class="col-lg-4 text-center">
                <div class="single-fet">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-gear-wide-connected" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8.932.727c-.243-.97-1.62-.97-1.864 0l-.071.286a.96.96 0 0 1-1.622.434l-.205-.211c-.695-.719-1.888-.03-1.613.931l.08.284a.96.96 0 0 1-1.186 1.187l-.284-.081c-.96-.275-1.65.918-.931 1.613l.211.205a.96.96 0 0 1-.434 1.622l-.286.071c-.97.243-.97 1.62 0 1.864l.286.071a.96.96 0 0 1 .434 1.622l-.211.205c-.719.695-.03 1.888.931 1.613l.284-.08a.96.96 0 0 1 1.187 1.187l-.081.283c-.275.96.918 1.65 1.613.931l.205-.211a.96.96 0 0 1 1.622.434l.071.286c.243.97 1.62.97 1.864 0l.071-.286a.96.96 0 0 1 1.622-.434l.205.211c.695.719 1.888.03 1.613-.931l-.08-.284a.96.96 0 0 1 1.187-1.187l.283.081c.96.275 1.65-.918.931-1.613l-.211-.205a.96.96 0 0 1 .434-1.622l.286-.071c.97-.243.97-1.62 0-1.864l-.286-.071a.96.96 0 0 1-.434-1.622l.211-.205c.719-.695.03-1.888-.931-1.613l-.284.08a.96.96 0 0 1-1.187-1.186l.081-.284c.275-.96-.918-1.65-1.613-.931l-.205.211a.96.96 0 0 1-1.622-.434L8.932.727zM8 12.997a4.998 4.998 0 1 0 0-9.995 4.998 4.998 0 0 0 0 9.996z"/>
                            <path fill-rule="evenodd" d="M7.375 8L4.602 4.302l.8-.6L8.25 7.5h4.748v1H8.25L5.4 12.298l-.8-.6L7.376 8z"/>
                        </svg>
                    </div>
                    <h2>电能质量故障</h2>

                    <p>电能质量故障是指由于供电电压、频率等方面问题导致用电设备故障或无法正常工作，
                        主要包括供电电压、频率存在偏差或波动、谐波等。 </p>

                </div>
            </div>
        </a>
        <a href="#repair">
            <div class="col-lg-4 text-center">
                <div class="single-fet">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-gear-wide" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8.932.727c-.243-.97-1.62-.97-1.864 0l-.071.286a.96.96 0 0 1-1.622.434l-.205-.211c-.695-.719-1.888-.03-1.613.931l.08.284a.96.96 0 0 1-1.186 1.187l-.284-.081c-.96-.275-1.65.918-.931 1.613l.211.205a.96.96 0 0 1-.434 1.622l-.286.071c-.97.243-.97 1.62 0 1.864l.286.071a.96.96 0 0 1 .434 1.622l-.211.205c-.719.695-.03 1.888.931 1.613l.284-.08a.96.96 0 0 1 1.187 1.187l-.081.283c-.275.96.918 1.65 1.613.931l.205-.211a.96.96 0 0 1 1.622.434l.071.286c.243.97 1.62.97 1.864 0l.071-.286a.96.96 0 0 1 1.622-.434l.205.211c.695.719 1.888.03 1.613-.931l-.08-.284a.96.96 0 0 1 1.187-1.187l.283.081c.96.275 1.65-.918.931-1.613l-.211-.205a.96.96 0 0 1 .434-1.622l.286-.071c.97-.243.97-1.62 0-1.864l-.286-.071a.96.96 0 0 1-.434-1.622l.211-.205c.719-.695.03-1.888-.931-1.613l-.284.08a.96.96 0 0 1-1.187-1.186l.081-.284c.275-.96-.918-1.65-1.613-.931l-.205.211a.96.96 0 0 1-1.622-.434L8.932.727zM8 12.997a4.998 4.998 0 1 0 0-9.995 4.998 4.998 0 0 0 0 9.996z"/>
                        </svg>
                    </div>
                    <h2>客户内部故障</h2>

                    <p>客户内部故障指产权分界点客户侧的电力设施故障。</p>

                </div>
            </div>
        </a>
        <a href="#repair">
            <div class="col-lg-4 text-center">
                <div class="single-fet">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-wrench" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019L13 11l-.471.242-.529.026-.287.445-.445.287-.026.529L11 13l.242.471.026.529.445.287.287.445.529.026L13 15l.471-.242.529-.026.287-.445.445-.287.026-.529L15 13l-.242-.471-.026-.529-.445-.287-.287-.445-.529-.026z"/>
                        </svg>
                    </div>
                    <h2>其他故障</h2>

                    <p>其他故障指物业公共部位、共用设备、公共设施等非电力设施的故障。</p>

                </div>
            </div>
        </a>
        <div class="col-lg-4 text-center">
            <div class="single-fet">
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
                    </svg>
                </div>
                <h2>维修人员联系方式</h2>
            </div>
        </div>
    </div>


</div>

<section class="contact" id="contact">

    <div class="container">

        <div class="row">

            <div class="col-md-6">

                <div class="alert alert-success hidden" id="contactSuccess">
                    <strong>Success!</strong> Your message has been sent to us.
                </div>

                <div class="alert alert-error hidden" id="contactError">
                    <strong>Error!</strong> There was an error sending your message.
                </div>

                <h2 class="short"><strong>联系</strong> 我们</h2>

                <form class="clearfix" accept-charset="utf-8" method="get" action="#">
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label for="name">名字</label>
                            <input type="text" placeholder="" value="" name="name" id="name"
                                   class="form-control input-lg">
                        </div>

                        <div class="col-sm-6 form-group">
                            <label for="email">邮箱地址</label>
                            <input type="email" placeholder="" value="" name="email" id="email"
                                   class="form-control input-lg">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 form-group">
                            <label for="message">留言</label>
                            <textarea rows="4" name="message" id="message" class="form-control"></textarea>
                        </div>
                    </div>

                    <button class="btn btn-success btn-xlg" type="submit">发送留言</button>
                </form>
            </div>
            <div class="col-md-offset-1 col-md-5">
                <br/>


                <h3>公司<strong>地址</strong></h3>
                <ul class="unstyled">
                    <li><i class="icon-map-marker"></i> <strong>地址:</strong> 江西省南昌市青山湖区广兰大道418号
                    </li>
                    <li><i class="icon-phone"></i> <strong>联系方式:</strong> 18970741538</li>
                    <li><i class="icon-envelope"></i> <strong>邮箱:</strong> <a href="mailto:mail@example.com">18970741538@163.com</a>
                    </li>
                </ul>


            </div>


        </div>

    </div>

</section>

<section class="repair" id="repair">

    <div class="container">

        <div class="row">

            <div class="col-md-6">

                <h2 class="short"><strong>维修</strong>报表</h2>

                <form class="clearfix" accept-charset="utf-8" method="get" action="/repairSubmit">
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label for="address">小区楼栋</label>
                            <input type="text" placeholder="小区名称-楼栋-室" value="" name="address" id="address"
                                   class="form-control input-lg">
                        </div>

                        <div class="col-sm-6 form-group">
                            <label for="type">维修类型</label>
                            <select type="text" placeholder="fsda" value="" name="type" id="type"
                                    class="form-control input-lg">
                                <option style="background-color: white;color: #1D1E2F">高压故障</option>
                                <option style="background-color: white;color: #1D1E2F">低压故障</option>
                                <option style="background-color: white;color: #1D1E2F">电能质量故障</option>
                                <option style="background-color: white;color: #1D1E2F">客户内部故障</option>
                                <option style="background-color: white;color: #1D1E2F">其他故障</option>
                            </select>
                        </div>

                        <div class="col-sm-6 form-group">
                            <label for="manager">户主</label>
                            <input type="text" placeholder="" value="" name="manager" id="manager"
                                   class="form-control input-lg">
                        </div>
                        <div class="col-sm-6 form-group">
                            <label for="phone">联系方式</label>
                            <input type="text" placeholder="" value="" name="phone" id="phone"
                                   class="form-control input-lg">
                        </div>
                        <%--                        <div class="col-sm-6 form-group">--%>
                        <%--                            <label for="email">维修员</label>--%>
                        <%--                            <input type="email" placeholder="" value="" name="repairman" id="repairman"--%>
                        <%--                                   class="form-control input-lg">--%>
                        <%--                        </div>--%>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 form-group">
                            <label for="tips">详细信息</label>
                            <textarea rows="4" name="tips" id="tips" class="form-control"></textarea>
                        </div>
                    </div>

                    <button class="btn btn-success btn-xlg" type="submit" onclick="alert('提交成功')">提交维修申请</button>
                </form>
            </div>
            <div class="col-md-offset-1 col-md-5">
                <br/>
                <img src="images/repair.png" alt="" style="width: 500px">
            </div>
        </div>

    </div>

</section>
<footer id="footer">
    <div class="container">
        <div class="row">
            <div class="footer-ribbon" style="right: 0">
                <h3 class="title" style="margin: 0;padding: 5px 10px">Thank <span>You</span></h3>
            </div>

        </div>
    </div>
    <div class="footer-copyright">
        <div class="container">
            <div class="row">
                <div class="col-md-2" style="margin-top: -20px">
                    <a href="mainpage.jsp">
                        <img src="images/logo.png" class="logo" alt="Template Eden">
                    </a>
                </div>
                <div class="col-md-5">
                    <p>版权所有&copy; Copyright 2020 by Software Engineering OF ECUT.</p>
                </div>
                <div class="col-md-5">
                    <nav id="footer-menu">
                        <select class="sel2" style="background-color: white;color: #1D1E2F">
                            <option style="background-color: white;color: #1D1E2F">中文（简体）</option>
                            <option style="background-color: white;color: #1D1E2F">English</option>
                        </select>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- 注意3个js文件的引入顺序，它们有依赖关系，顺序不能错 -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
